<template>
	<div class='my-fixed' @click.stop.prevent="">
		<div class='pwd_parent'>
			<div style='border: 1px solid #e5e5e5;display: flex;justify-content: space-between;line-height: 36px;height:36px;align-items: center;background-color: #f5f5f5;padding:0 20px;'>
				<h3 style='display: inline-block;'>修改密码</h3>
				<img src="static/image/home/closeWindow.png" style='width: 14px;height: 14px;cursor:pointer;' @click='close' />
			</div>
			<div class='passwordEntry'>
				<div class="password_tip">如果忘记原密码请在手机即时通讯上使用验证码登入，即可重置密码</div>
				<div class="password_entry_main">
					<div class="pwd_item">
						<div>原密码</div> 
						<Input v-model='oldValue' placeholder="输入原密码" ref='oldInput' @on-enter='keyEnter(1)' autocomplete="off"></Input>
					</div>
					<div class="pwd_error_tip">
						{{oldError}}
					</div>
					<div class="pwd_item">
						<div>新密码</div>
						<Input v-model='newValue' placeholder="输入6~20位密码" :maxlength='20' ref='newInput' type='password' @on-blur="isCommonFn" @on-enter='keyEnter(2)' autocomplete="off"></Input>
					</div>
					<div class="pwd_error_tip">
						{{newError}}
					</div>
					<div class="pwd_item">
						<div>确认密码</div>
						<Input v-model='sameValue' placeholder="再次输入密码" ref='sameInput' type='password' @on-enter='keyEnter(3)' autocomplete="off"></Input>
					</div>
					<div class="pwd_error_tip">
						{{sameError}}
					</div>
					<div class="pwd_btn_wrap">
						<button @click='updatePassword' class="determine_btn">确定</button>
						<button @click='close' class="default_btn">取消</button>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import {updatePassword_axios} from "../api/password"
	export default {
		name: 'pass-word',
		data() {
			return {
				off: 'off',
				autofocus: true,
				oldError: '',
				newError: '',
				sameError: '',
				oldValue: '',
				newValue: '',
				sameValue: ''
			}
		},
		watch: {
			oldValue() {
				this.oldError = ""
			},
			newValue() {
				if(this.newError == "两次新密码输入不一致") {
					this.newError = this.sameError = ''
				} else if(this.newError == "请输入新密码") {
					this.newError = ''
				}
			},
			sameValue() {
				if(this.sameError == "两次新密码输入不一致") {
					this.newError = this.sameError = ''
				} else if(this.sameError == "请确认新密码") {
					this.sameError = ''
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.oldInput.focus()
			})
		},
		methods: {
			isCommonFn() {
				if((this.oldValue.trim() != ''&&this.newValue.trim() != '')&&(this.oldValue.trim() == this.newValue.trim())) this.newError = '新密码和旧密码相同，请重新输入';
				else this.newError = '';
			},
			initError() {
				this.oldError = this.sameError = this.newError = ''
			},
			close() {
				this.$emit('setClose', '3')
			},
			keyEnter(index) {
				if(index == 1) {
					this.$refs.newInput.focus()
				} else if(index == 2) {
					this.$refs.sameInput.focus()
				} else if(index == 3) {
					this.$refs.sameInput.blur()
					this.updatePassword()
				}
			},
			updatePassword() {
				let patrn=/^([a-zA-Z0-9]|[._]){6,20}$/;
				if(this.oldValue == "") {
					this.oldError = "请输入原密码";
					this.$refs.oldInput.focus();
				} else if(this.newValue == "") {
					this.newError = "请输入新密码";
					this.$refs.newInput.focus();
				} else if(this.sameValue == "") {
					this.sameError = "请确认新密码";
					this.$refs.sameInput.focus();
				} else if(this.newValue != this.sameValue) {
					this.newError = this.sameError = "两次新密码输入不一致";
					this.$refs.newInput.focus();
				} else {
					if(!patrn.exec(this.newValue)){
						this.$Message.warning('密码格式不正确或密码长度少于6位!')
						return;
					}
					updatePassword_axios({
						userId: this.$store.state.myInfo.account,
						deviceId: this.$store.state.deviceId,
						passwordold: this.$func.md5(this.oldValue),
						password: this.$func.md5(this.newValue)
					}).then(res=>{
						if(res.result == 200) {
							this.$Message.success('修改密码成功');
							this.close();
						} else if(res.result == 6) {
							this.oldError = res.msg
							this.$refs.oldInput.focus()
						} else if(res.result == 7) {
							this.newError = res.msg
							this.$refs.newInput.focus()
						}
					}).catch(err=>{
						this.close();
						this.$Message.warning('系统错误!')
					})
				}
			}
		}
	}
</script>